<template>
	<view class="maskMake">
		<view class="maskMake-content">
			<view> 温馨提示 </view>
			<view>
				<slot></slot>
			</view>
			<view @click="toSetting"> 确定 </view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'maskMake',
		data() {
			return {}
		},
		methods: {
			toSetting() {
				this.$emit('close')
			}
		}
	}
</script>
<style lang="less" scoped>
	.maskMake {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100vw;
		height: 100vh;
		display: grid;
		place-items: center;

		&-content {
			width: 580rpx;
			height: 400rpx;
			background: #fff;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;

			&>view:nth-child(1) {
				text-align: center;
				margin-top: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			&>view:nth-child(2) {
				margin-top: 40rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: grey;
			}

			&>view:nth-child(3) {
				width: 80%;
				height: 88rpx;
				margin: 0 auto;
				background: #FCC928;
				text-align: center;
				line-height: 88rpx;
				margin-top: auto;
				margin-bottom: 40rpx;
				font-size: 34rpx;
				font-weight: bold;
				border-radius: 10rpx;
			}
		}
	}
</style>